<template>
<div>
<Input v-model="value" disabled placeholder="" :on-change="handleChange">
  <Upload
  ref="upload"
  :action="action"
  :headers="headers"
  :format="format"
  :show-upload-list="false"
  slot="suffix"
  :on-format-error="handleFormatError"
  :on-exceeded-size="handleMaxSize"
  :on-success="handleSuccess"
  :before-upload="handleBeforeUpload">
      <Button type="primary" style="border:0px;padding:0px;">
        <Icon size="28" color="#ffffff" type="md-cloud-upload" />
      </Button>
  </Upload>
</Input>
<div class="demo-upload-list" :key="index" v-for="(item,index) in uploadList">
    <template v-if="item.status !== 'finished'">
        <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
    </template>
</div>
</div>
</template>
<script>
import { getToken } from '@/libs/util'

export default {
  props: {
    headers: {
      type: Object,
      default () {
        return {
          'token': getToken()
        }
      }
    },
    format: {
      type: Array,
      default () {
        return ['jpg', 'jpeg', 'png']
      }
    },
    action: {
      type: String,
      default: '/manage/imgUpload/uploadQiuin'
    },
    value: { // 绑定value
      type: [Number, String, Array],
      default: ''
    }
  },
  data () {
    return {
      uploadList: []
    }
  },
  mounted () {
    this.$nextTick(function () {
      this.uploadList = this.$refs.upload.fileList
    })
  },
  methods: {
    handleChange () {
      this.$emit('input', this.value)
    },
    handleBeforeUpload (file) {
      this.$emit('on-success', file)
    },
    handleSuccess  (res, file) {
      if (res.code === 200) {
        this.$emit('input', res.url)
      }
    },
    handleFormatError () {

    },
    handleMaxSize () {}
  }
}
</script>
